// 1.下包并引入路由
import VueRouter from "vue-router";
import Vue from "vue";
import Home from "@/pages/Home";
import Login from "@/pages/Login";
import News from "@/pages/Home/News";
import Music from "@/pages/Home/Music";
import Game from "@/pages/Home/Game";
import NotFound from "@/pages/NotFound/404";

// 2.应用路由插件(比如注册一些router提供的全局组件等等...)
Vue.use(VueRouter);

// 3.创建路由器对象,并在内部配置模式和路由表
const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/",
      redirect: "/Home",
    },
    // 每一个对象都是一个路由规则,我们可以给路由规则一个名字,方便后边使用
    {
      path: "/Home",
      component: Home,
      // 如果某个路由拥有了默认子路由,我们一般不会在这个路由规则上命名
      // name:"Home"
      // 二级路由配置
      children: [
        {
          // 二级路由的路径可以直接书写二级路由名称即可,不用书写完整的地址
          // 但是不能写/+当前路由地址
          // 统一大写或者小写
          path: "News",
          component: News,
          name: "News",
        },
        {
          path: "Music",
          component: Music,
          name: "Music",
        },
        {
          path: "Game",
          component: Game,
          name: "Game",
        },
        // // 默认子路由写法1:重定向推荐写法
        {
          path:"",
          redirect:"News",
        },
        // // 默认子路由写法2:直接定向设置组件写法
        // {
        //   path:"",
        //   component:"News",
        // }
      ],
    },
    { path: "/Login", component: Login, name: "Login" },

    // 404配置写在最下边
    {
      path: "/*",
      component: NotFound,
    },
  ],
});

// 4.暴露router,注入到vue实例中
export default router;
